import React, { useEffect, useState } from 'react'
import Header from '../UI/Header/Header'
import Input from '../UI/Input/Input'
import './Login.scss'
import {useDispatch} from 'react-redux'
import {login} from "../../actions/user";

export default function Login() {
	const [apiKey, setApiKey] = useState('')
	const [secretKey, setSecretKey] = useState('')
	const [showButton, setShowButton] = useState(false)

	const dispatch = useDispatch()

	useEffect(() => {
		if (apiKey.trim() !== '' && secretKey.trim() !== '') {
			setShowButton(true)
		} else {
			setShowButton(false)
		}
	}, [apiKey, secretKey])

	return (
		<div className='loginView'>
			<Header name={'Login'} btnActive={true} />
			<div className='loginView__block'>
				<Input
					value={apiKey}
					setValue={setApiKey}
					type='text'
					placeholder='Введите apiKey'
				/>
				<Input
					value={secretKey}
					setValue={setSecretKey}
					type='password'
					placeholder='Введите secretKey'
				/>
			</div>
			{showButton ? <button className='btnSend' onClick={() => dispatch(login(apiKey, secretKey))}>Send</button> : <div></div>}
		</div>
	)
}
